<template>
 <div class="goods-main" v-show="goodsData.length > 0">
      <div
        @click="() => goDeatil(jumpUrl(item.type))"
        class="part"
        v-for="item in goodsData"
      >
        <Popper
          class="part-right-top thumb light"
          arrow
          @click.stop="menuShow"
        >
          <img :src="publicUrl(`/images/omit.png`)" />
          <template #content="{ close }">
              <div class="collect_text" @click="()=>clrear(close)">取消收藏</div>
              <div class="collect_text" @click="()=>goDeatil(jumpUrl(item.type))">产品详情</div>
          </template>
        </Popper>
        <Goods :data-source="item" />
      </div>

      <div class="part" v-for="item of surplusDiv(goodsData.length, 4)"></div>
    </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue"
import {surplusDiv,publicUrl} from "@/utils/util";
import { GoodsData } from "@/components/Goods/interface/index";
import Popper from "vue3-popper";
import {useRouter} from "vue-router";
import Goods from "@/components/Goods/index.vue";

    const goodsData = ref<Array<GoodsData>>([
  {
    img: publicUrl("/images/Special164.jpg"),
    title: "男衬衫长袖固化款定制款款号男衬衫长袖固化款定制款款号",
    price: 59,
    pay_num: 300,
    company_name: "云裁定制服装有限公司",
    city: "广州",
    area: "增城",
    type: "spot",
  },
  {
    img: publicUrl("/images/Special164.jpg"),
    title: "mtm定制",
    price: 59,
    pay_num: 300,
    company_name: "云裁定制服装有限公司",
    city: "广州",
    area: "增城",
    type: "mtm",
  },
  {
    img: publicUrl("/images/fabric.jpg"),
    title: "某面料",
    price: 59,
    pay_num: 300,
    company_name: "云裁定制服装有限公司",
    city: "广州",
    area: "增城",
    type: "fabric",
  },
  {
    img: publicUrl("/images/fabric.jpg"),
    title: "某面料",
    price: 59,
    pay_num: 300,
    company_name: "云裁定制服装有限公司",
    city: "广州",
    area: "增城",
    type: "fabric",
  },
  {
    img: publicUrl("/images/fabric.jpg"),
    title: "某面料",
    price: 59,
    pay_num: 300,
    company_name: "云裁定制服装有限公司",
    city: "广州",
    area: "增城",
    type: "fabric",
  },
  
]);
const router = useRouter();
const menuShow = () => {};
const jumpUrl = (
  type: "fabric" | "mtm" | "spot",
  id: number | undefined = undefined
): string => {
  switch (type) {
    case "fabric":
      return "/mtm/fabric/index/fabricDetail";
    case "mtm":
      return "/mtm/index/make";
    default:
      return "/mtm/spot/index/spotDetail";
  }
}
const goDeatil = (path:string) => {
  router.push({path});
};

const clrear = (close:any)=>{
    close();
}
</script>
<style scoped lang="scss">
  @media screen and (min-width: $pc-min-width) {
    @import "./pc.scss";
  }
</style>